<#include "../include/header.html">
<body>
<style>
    .btn-style {
        background: #0d7fdd;
        width: 30px;
        height: 30px;
        border-radius: 100%;
    }
</style>

<!--BUTTON标签-->
<div id="button">Button</div>

<script>
    $("#button").kendoButton({
        //是否启用button
        enable: true,
        //添加图标
        icon: "search",
        //给button添加图片样式
        imageUrl: "",
        //给button添加一个或多个自定义样式
        spriteCssClass: "btn-style",
    });
</script>
<!--SPAN标签-->
<span id="query-btn" class="btn btn-primary" data-bind="click:query"><i class="fa fa-search"></i> <@spring.message "hap.query"/></span>
<script>
    //获取button
    //kendo组件在使用其组件方法时必须在组件初始化后加上data(“kendoXXX”)，否则调用方法时报错！
    var button = $("#query-btn").kendoButton().data("kendoButton");
    //关闭button
    button.enable(false);
    //开启button
    button.enable(true);
    //click事件
    $("#query-btn").kendoButton({
        click: function (e) {
            alert(e.event.target.tagName);  //SPAN
        }
    });
</script>
<!--禁用Button-->
<!--使用配置禁用按钮-->
<div id="button">Button</div>
<script>
    $("#button").kendoButton({
        enable: false
    });
</script>

<!--使用方法禁用-->
<script>
    var button = $("#button").kendoButton({}).data("kendoButton");
    // button.enable(false);
</script>
<!--缺点：会导致Button失去之前的样式，推荐使用2)。-->
<!--使用jQuery给Button添加disabled属性，并移除其绑定事件-->
<!--非DOM0级事件-->
<script>
    // $("#query-btn").attr("disabled","disabled").unbind();
</script>

<!--DOM0级事件(用onclick属性直接将事件方法写在HTML标签内)-->
<script>
    // $("#query-btn").attr({"disabled":"disabled","onclick":null});
</script>
<!--BUTTON图标-->
<!--只需要将i标签的class替换成FontAwesome官网提供的样式类名就能更改成对应的图标。-->
<span id="query-btn-1" class="btn btn-primary" onclick="query()"><i class="fa fa-search"></i> <@spring.message "hap.query"/></span>

<!-------------------------DatePicker/DateTimePicker--------------------->

<input id="datetimepicker" style="width: 30%">
<script>
    $("#datetimepicker").kendoDateTimePicker({
        //animation:配置DataTimePicker打开，关闭时的动画。
        animation: {
            //b)open 开打时的动画配置
            open: {
                //c)effects 动画效果
                effects: "zoom:in",
                //d)duration 持续时间(ms)
                duration: 500
            },
            //a)close 关闭时的动画配置
            close: {
                effects: "zoom:out",
                duration: 500
            }
        },
        //disableDates:配置每周禁用选择的日期(天数范围)。
        disableDates: ["sat", "sun"],  //周六，周天不能被选择
        //format:格式化日期。
        format: "yyyy-MM-dd HH:mm:ss",
        // 4)max/min 作用：设置最大日期，最小日期。
        // max: "2018-01-01",
        // min: "2015-01-01",
        // 5)value作用：设置默认值。
        // value:"2017-12-30"
    });
    //    1)close/open/toggle关闭/打开组件
    var datetimepicker = $("#datetimepicker").kendoDateTimePicker().data("kendoDateTimePicker");
    $("#close").click(function () {
        datetimepicker.close("date");
    });
    $("#open").click(function () {
        datetimepicker.open("date");
    });
    $("#toggle").click(function () {
        datetimepicker.toggle("date");
    });
    //2)max/min  有参数时为设置最大/最小值，无参数时获取最大/最小值
    datetimepicker.max(new Date(2018, 0, 1));
    datetimepicker.min(new Date(2017, 0, 1));
    //3)enable/ readonly：设置组件启用/禁用/只读
    datetimepicker.readonly();  //只读
    datetimepicker.readonly(false);  //取消只读
    datetimepicker.enable(false);  //禁用
    datetimepicker.enable();  //启用

    //    5)setOptions重新设置配置
    datetimepicker.setOptions({
        min: new Date(2017, 1, 1)
    });

    //1)open/close:组件打开，关闭时候触发
    // 2)change：值发生改变时候触发
    $("#datetimepicker").kendoDateTimePicker({
        change: function () {
            console.log(this.value());
        },
        open: function () {
            console.log("open");
        },
        close: function () {
            console.log("close");
        }
    });


</script>
<input id="startDate">
<input id="endDate">
<script>
    //开始时间
    var start = $("#startDate").kendoDateTimePicker({
        change: dateChange,
        format: "yyyy-MM-dd HH:mm:ss",
    }).data("kendoDateTimePicker");

    //结束时间
    var end = $("#endDate").kendoDateTimePicker({
        change: dateChange,
        format: "yyyy-MM-dd HH:mm:ss",
    }).data("kendoDateTimePicker");

    //获取时间组件的最大值，最小值
    var maxDate = end.max(),
        minDate = end.min();

    //时间改变时，重新设置开始时间的最大值与结束时间的最小值
    function dateChange() {
        var startDate = start.value(),
            endDate = end.value();
        if (startDate && endDate) {
            end.min(startDate);
            start.max(endDate);
        } else if (!startDate && endDate) {
            end.min(minDate);
            start.max(endDate);
        } else if (startDate && !endDate) {
            end.min(startDate);
            start.max(maxDate);
        } else if (!startDate && !endDate) {
            end.min(minDate);
            start.max(maxDate);
        }
    }
</script>

<!--DropDownList常用 API-->
<!--父级子级下拉框-->
<input id="parent">
<input id="child">
<script>
    //父下拉框
    $("#parent").kendoDropDownList({
        dataTextField: "parentName",
        dataValueField: "parentId",
        dataSource: [
            {parentName: "上海市", parentId: 1},
            {parentName: "北京市", parentId: 2}
        ]
    });
    //子下拉框
    $("#child").kendoDropDownList({
        cascadeFrom: "parent",  //关联父元素id
        //一般用于后台交互使用，即对应viewModel绑定的value值
        dataTextField: "childName",
        dataValueField: "childId",
        //为下拉框提供数据源。
        dataSource: [ //通过parentId关联
            {childName: "青浦区", childId: 1, parentId: 1},
            {childName: "东城区", childId: 2, parentId: 2},
            {childName: "黄浦区", childId: 3, parentId: 1},
            {childName: "朝阳区", childId: 4, parentId: 2}
        ]
    });
    /*7)filter  默认值：none。*/
    $("#parent").kendoDropDownList({
        //搜索过滤策略
        //startswith 搜索数据源开头包含用户输入的值
        //endswith 搜索数据源结尾包含用户输入的值
        //contains 搜索数据源包含用户输入的值
        filter: "contains",
        dataSource: [
            {parentName: "上海市"},
            {parentName: "北京市"}
        ],
        dataTextField: "parentName",
        dataValueField: "parentName",
        //    8)delay：设置filter搜索后弹出区域的延迟时间(ms)。
        delay: "1000",
        //    height:下拉框弹出区域的高度(px)  Number，正整数
        height: 200,
        //    ignoreCase 设置搜索时是否忽略大小写。
        ignoreCase: true,
        //index:设置默认值，和value不同的是它的值集范围是索引
        index: 1,
        //    12)minLength 用户在执行过滤器之前必须输入的最少字符数
        //    13)text 设置下拉框的默认文字显示内容
        //    14)value 设置下拉框默认值
        //    15)valuePrimitive 如果设置为true，则视图模型字段将使用选定的项目值字段进行更新。如果设置为false，则视图模型字段将使用所选项目进行更新。
        //    16)optionLabel 定义默认空项目的文本，类似于input的placeholder。只有DropDownList组件有该属性，ComboBox组件可以直接写在html元素的placeholder上。
    });

</script>
<!--在页面引入快码-->
<script type="text/javascript" src="${base.contextPath}/common/code?flagData=SYS.YES_NO"></script>
<!--多个快码的引入方法-->
<script type="text/javascript" src="${base.contextPath}/common/code?flagData=SYS.YES_NO&flagData2=SYS.YES_NO "></script>

<script type="text/javascript"
        src="${base.contextPath}/common/code?province=DMS_GPS_REGIONS_PROVINCE&city=DMS_GPS_REGIONS_CITY&area=DMS_GPS_REGIONS_AREA"></script>
<input id="province"/>
<input id="city"/>
<input id="area"/>
<script>
    $("#province").kendoDropDownList({
        dataSource: province,
        dataTextField: "meaning",
        dataValueField: "codeValueId",
        valuePrimitive: true
    });
    $("#city").kendoDropDownList({
        dataSource: city,
        dataTextField: "meaning",
        dataValueField: "codeValueId",
        valuePrimitive: true,
        cascadeFrom: "province",
        cascadeFromField: "parentCodeValueId",
    });
    $("#area").kendoDropDownList({
        dataSource: area,
        dataTextField: "meaning",
        dataValueField: "codeValueId",
        valuePrimitive: true,
        cascadeFrom: "city",
        cascadeFromField: "parentCodeValueId",
    });
</script>
<!--3.通过url配置下拉框数据源-->
<input id="role"/>
<script>
    //系统角色种类下拉框
    $("#role").kendoDropDownList({
        filter: "contains",
        dataTextField: "roleName",
        dataValueField: "roleId",
        valuePrimitive: true,
        //通过url配置下拉框数据源
        dataSource: {
            transport: {
                read: {
                    url: "${base.contextPath}/sys/role/query?pageSize=10000"
                }
            },
            schema: {
                data: 'rows',
            }
        }
    });
</script>

<!--NumericTextBox 数值控件 -->

<input id="numerictextbox"/>
<script>
    var a = 1 / 3;
    $("#numerictextbox").kendoNumericTextBox({
        //NumericTextBox鼠标focus时候的精度。
        decimals: 4, //鼠标聚焦时精确到小数点第四位
        value: a,
        //    鼠标放置在向下按钮/向上按钮时候，组件内容为空时候显示的文字
        downArrowText: "减少",
        upArrowText: "增加",
        placeholder: "请设置值",
        //    鼠标不focus时，显示数值的格式。
        format: "n0",  //不保留小数,
        // format: "n3" ,//保留3位小数
        // format: "p0" ,//(百分比显示形式)不保留小数位
        // format: "p3" ,//(百分比显示形式)保留3位小数
        //显示/隐藏向下/向上按钮
        spinners: true,
        //    6)step 指定增加或减少小部件的固定值。
        step: 2,
    });
    //当点击组件向下/向上按钮时触发
    $("#numerictextbox").kendoNumericTextBox({
        spin: function () {
            var value = this.value();
            console.log(value);
        }
    });

</script>
<form id="form">
    <input name="username" required data-required-msg="必输"/> <br/>
    <button>Validate</button>
</form>
<script>
    $("#form").kendoValidator({
        //定义呈现验证消息的模板。
        errorTemplate: "<span style='background: red;'>#=message#</span>",
    });
    //给定验证规则验证失败将显示的一组消息
    $("#form").kendoValidator({
        messages: {
            customRule1: "必须大于1"
        },
        //自定义验证规则。
        rules: {
            //必须大于1
            customRule1: function (input) {
                return input.val() > 1;
            },
        },
        //元素失去焦点时是否触发验证。默认值为true
        validateOnBlur: true,
    });

    //errors 获取错误消息，转换成字符串数组。
    var validator = $("#form").kendoValidator().data("kendoValidator");
    $("#save").click(function () {
        if (validator.validate() === false) {
            //errors 获取错误消息，转换成字符串数组。
            var errors = validatable.errors();
            console.log(errors); // ["username 为必填项"]
        }
    });


</script>

<div id="form-1">
    <input name="username" required/> <br/>
    <input name="location" required/> <br/>
    <button>Validate</button>
</div>
<script>
    var validator = $("#form-1").kendoValidator().data("kendoValidator");
    $("button").click(function () {
        if (!validator.validateInput($("input[name=username]"))) {
            alert("UserName is not valid!");
        } else {
            alert("UserName is valid!");
        }
    });

    $("#form-1").kendoValidator({
        validate: function (e) {
            console.log("valid" + e.valid);
        }
    });
</script>

<!--如果要给input加入必输校验，仅需给其加上required属性，data-required-msg为提示内容，
       其他校验需要自己添加自定义校验，其中type=email的input组件自带对email格式的校验。-->
<form>
    <input class="k-textbox" type="email" name="email" id="email" required data-required-msg="邮箱为必填"><br>
    <input class="k-textbox" id="phone" name="phone" required data-required-msg="电话为必填"><br>
    <button id="save">Save</button>
</form>
<script>
    var validator = $("form").kendoValidator({
        messages: {
            phone: "请输入正确格式的电话号码",
        },
        rules: {
            phone: function (input) {
                if (input.is("[name=phone]")) {
                    return /^1(3|4|5|7|8)\d{9}$/.test(input.val())
                }
                return true;
            }
        }
    }).data("kendoValidator");
    $("#save").on("click", function (e) {
        e.preventDefault();
        if (validator.validate()) {
            alert("验证成功");
        }
    })
</script>


<div id="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Ajax Tab</li>
    </ul>
    <div>Content 1</div>
    <div></div>
</div>

<script>
    $("#tabstrip").kendoTabStrip({
        //如果特定的标签页通过Ajax加载，应该将URL设置为数组中相应的位置，并将其他元素设置为null
        contentUrls: [
            null,
            "http://localhost:8080/home.html"
        ]
    });
    //Ajax加载标签内容的URL。
    ("#tabstrip").kendoTabStrip({
        dataTextField: "Name",
        dataContentField: "Content",
        dataSource: [
            {Name: "Tab1", Content: "Tab1: content"},
            {Name: "Tab2", Content: "Tab2: content"}
        ]
    });

    var tabStrip = $("#tabstrip").kendoTabStrip({
        contentUrls: [
            null,
            "http://localhost:8080/home.html"
        ]
    }).data("kendoTabStrip");
    tabStrip.remove("li:last");
</script>

<div id="dialog">
</div>
<script>
    //
    <!--与窗口交互的按钮。预定义的数组值是"Close"(关闭), "Refresh"(最大化), "Minimize"(最小化), and "Maximize"(最大化)。-->
    $("#dialog").kendoWindow({
        actions: ["Refresh", "Minimize", "Maximize", "Close"],
        //指定窗口应从其加载内容或URL请求选项
        content: "http://localhost:8080/home.html"
    });
</script>
<!----------------------------MaskedTextBox--------------------------------->
<input id="maskedtextbox"/>
<script>
    $("#maskedtextbox").kendoMaskedTextBox({
        mask: "(000) 000-0000"
    });
</script>

<input type="file" name="files" id="photos"/>
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "${base.contextPath}/websocket/uploadFiles?${_csrf.parameterName}=${_csrf.token}",
            autoUpload: false,
            saveField: " files",
            //启用（true）或禁用（false）上传。
            enabled:true,
            // 作用：本地化。HAP基本都给设置好了。
            localization: true,
            //   作用：启用（true）或禁用（false）选择多个文件的功能。
            multiple: true,
            //     作用：启用（true）或禁用（false）显示上传文件的文件列表的功能。
            showFileList: true,

        },
    });
</script>
</body>
</html>